<template>
  <div id="app">
    <nav>
      <el-link type="primary" @click="$router.push('/login')">登录</el-link> |
      <el-link type="primary" @click="$router.push('/home')">Home</el-link> |
      <el-link type="primary" @click="$router.push('/news')">news</el-link> |
      <el-link type="primary" @click="$router.push('/hot')">hot</el-link> |
      <el-link type="primary" @click="$router.push('/manage')">manage</el-link> |
      <el-button type="primary" @click="goHome">去首页</el-button> |
      <el-button type="success" @click="goNews">看新闻</el-button> |
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'App',
  methods: {
    goHome(){
      // 'home' 是 path
      this.$router.push('home');
    },
    goNews(){
      // 指定路由名
      this.$router.push({name:'news'});
    }
  }
}
</script>

<style scope>
#app{
  height: 400px;
  width: 800px;
  margin: 0 auto;
  border: 1px solid #000;
}
#app nav{
  text-align: center;
}
</style>
